<template>
  <div class="div-clock">
    <i class="el-icon-time"></i><span class="time">{{time}}</span>
  </div>
</template>
<script>

  // import Request from '@/common/js/Request'

  export default {
    data() {
      return {
        time: this.formatTime(new Date())
      }
    },
    created: function () {
      setInterval(()=>{
        this.time = this.formatTime(new Date())
      },1000)
    },
    methods: {
       formatTime : date => {
        let year = date.getFullYear().toString()
         let month = (date.getMonth() + 1).toString()
         let day = date.getDate().toString()
         let hour = date.getHours().toString()
         let minute = date.getMinutes().toString()
         let second = date.getSeconds().toString()

         year = year[1]?year:'0'+year
         month = month[1]?month:'0'+month
         day = day[1]?day:'0'+day
         hour = hour[1]?hour:'0'+hour
         minute = minute[1]?minute:'0'+minute
         second = second[1]?second:'0'+second

        return [hour, minute, second].join(':') + ' ' +  [year, month, day].join('/')
      },


    }
  }

</script>

<style>

  .div-clock{
    display: flex;
    align-items: center;
    justify-content: center;

  }
  i{
    margin-right: 4px;
    font-size: 14px;
    color: #303133;
    line-height: 12px;
    height: 12px;
  }
  .time{
    display: flex;
    justify-content: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #303133;
    line-height: 12px;
    height: 12px;
    /*border-bottom: 1px solid #606266;*/
  }

</style>
